<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
      layout:decorate="~{layout/default}">
<head>
    <meta charset="UTF-8">
    <title>帝一流</title>
    <link th:href="@{/static/plugin/metismenu/metisMenu.css}" type="text/css" rel="stylesheet">
</head>
<body>
<div layout:fragment="cm-flex" class="cm-flex">
    <h1>海洋浮球</h1>
    <form id="cm-search" action="index.html" method="get">
        <input type="search" name="q" autocomplete="off" placeholder="Search...">
    </form>
</div>
<div layout:fragment="content" class="container-fluid">
    <div class="panel panel-default">
        <div class="panel-body auto-height" id="panel-buoy">
            <div class="buoy-left">
                <div class="input-group">
                    <input type="text" class="form-control" id="buoy" placeholder="查询浮球...">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">
                             <img th:src="@{/static/img/sf/search.svg}" height="18" width="18">
                        </button>
                    </span>
                </div>
                <h4>浮标信息</h4>
                <ul class="nav metismenu" id="side-menu">
                    <li class="active">
                        <a href="#">
                            <i class="fa fa-flag fa-fw" style="color: #31b0d5"></i>
                            浮球列表
                            <span class="fa arrow"></span>
                        </a>
                        <ul class="nav nav-second-level">
                            <li th:each="name:${#request.getAttribute('buoys')}">
                                <a href="javascript:void(0)" th:text="${name}"></a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fa fa-flag fa-fw" style="color: #e74c3c"></i>
                            假人列表
                            <span class="fa arrow"></span>
                        </a>
                        <ul class="nav nav-second-level">
                            <li th:each="name:${#request.getAttribute('dummies')}">
                                <a href="javascript:void(0)" th:text="${name}"></a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <blockquote class="buoy-left-map">
                <div id="amap" class="map"></div>
            </blockquote>
        </div>
    </div>
</div>
<div layout:fragment="myJs">
    <script th:src="@{/static/plugin/metismenu/metisMenu.js}"></script>
    <script th:src="@{/static/js/buoy.list.js}"></script>
    <script src="http://webapi.amap.com/maps?v=1.4.6&key=e6f07e683b599f2d9e4c7f79073d1c7b"></script>
</div>
</body>
</html>